

<!-- 店铺主页 -->
<template>
	<view>
		<view class="b-g"><image :src="imgSite+storeMsg.bannerUrl" mode="widthFix"></image></view>
		<view class="white" :style="{ opacity: opacity }"></view>
		<view class="white2" v-if="state === 2"></view>
		<view class="btn-top">
			<view class="bottom" :style="{ opacity: 1 - opacity }">
				<image class="good_src" :src="imgSite+storeMsg.logoUrl"></image>
				<view class="right">
					<view class="left-v">
						<view class="name">
							<view class="name-msg">{{storeMsg.companyName}}</view>
<!--							<view class="tip" v-if="storeMsg.selfSupporting == '0'">自营</view>-->
						</view>
						<view class="star" v-if="storeMsg.vendorLevel">
							<image :src="icon.star_r" v-for="(item, index) of storeMsg.vendorLevel" :key="'r' + index"></image>
							<image :src="icon.star_g" v-for="(item, index) of 5-storeMsg.vendorLevel" :key="'g' + index"></image>
						</view>
						<view class="fans">{{storeMsg.fllowNum}}人关注</view>
					</view>
					<view class="right-v">
						<view v-if="!storeMsg.userAttentionStatus" class="btn" @click="guanzhu">
							<view>
								<image :src="icon.guanzhu" v-if="!storeMsg.userAttentionStatus"></image>
								<text>关注</text>
							</view>
						</view>
						<view v-else class="btn followed" @click="guanzhu">
							<view>
								<text v-if="storeMsg.userAttentionStatus">已关注</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="top">
			<image @click="back()" :src="icon.return" v-if="state === 1"></image>
			<image @click="back()" style="width: 37rpx;height: 37rpx;margin-right: 20rpx;" src="/static/images/common/return.png" v-if="state === 2"></image>
			<view :class="styleChange.input_color">
				<image :src="icon.search_w" v-if="state === 1"></image>
				<image :src="icon.search" v-if="state === 2"></image>
				<!--  @confirm="confirmSearchHandler()" -->
				<!-- <input placeholder="搜索店内商品" :placeholder-style="styleChange.input_holder" v-model="search_msg" @tap="bindKeyInput()"/> -->
				<input key="shopSearch" confirm-type="搜索" placeholder="搜索" :placeholder-style="styleChange.input_holder" @tap="bindKeyInput()"  />
			</view>
			<image :src="icon.caozuo" @click="toggleMenuListHandler()" v-if="state === 1"></image>
			<image :src="icon.msg_center" @click="toggleMenuListHandler()" v-if="state === 2"></image>
		</view>
		
		
		<!-- 筛选框 -->
		<view v-if="tabber_sel === '0'">
			<!-- #ifdef APP-PLUS || H5 -->
			<view v-if="state === 1">
				<navbar style="position: relative;" :headerTop="headerTop" :priceOrder="priceOrder" :listType="listType" :filterIndex="filterIndex" @getAction="tabClick"></navbar>
			</view>
			<view v-if="state === 2" style="background-color: white;">
				<navbar
					style="position: fixed;top: 70rpx;width: 100%;z-index: 10;background-color: white;"
					:headerTop="headerTop"
					:priceOrder="priceOrder"
					:listType="listType"
					:filterIndex="filterIndex"
					@getAction="tabClick"
				></navbar>
			</view>
			<!-- #endif -->
			
			<!-- #ifdef MP-WEIXIN -->
			<view v-if="state === 1">
				<navbar style="position: relative;top:60rpx" :headerTop="headerTop" :priceOrder="priceOrder" :listType="listType" :filterIndex="filterIndex" @getAction="tabClick"></navbar>
			</view>
			<view v-if="state === 2" style="background-color: white;">
				<navbar
					style="position: fixed;top: 176rpx;width: 100%;z-index: 10;background-color: white;"
					:headerTop="headerTop"
					:priceOrder="priceOrder"
					:listType="listType"
					:filterIndex="filterIndex"
					@getAction="tabClick"
				></navbar>
			</view>
			<!-- #endif -->
			
			
			<!-- 大图列表 -->
			<view v-if="listType === 0" :style="styleChange.listTop">
				<goodList v-if="goodsList && goodsList.length" :list="goodsList" isShop="1"></goodList>
				<g-empty v-else></g-empty>
			</view>
			
			<!-- 横向列表 -->
			<view class="good_list2" v-if="listType != 0">
				<goodListtransverse v-if="goodsList && goodsList.length" :list="goodsList" isShop="1"></goodListtransverse>
				<g-empty v-else></g-empty>
			</view>
		</view>
		
		<!-- #ifdef APP-PLUS -->
		<view style="margin-top: 60rpx;width: 100%;height: 1rpx;"></view>
		<!-- #endif -->
		
		
		<!-- 分类 -->
		<view v-if="tabber_sel === '1'">
			<view class="sort" :class="{firstType: index == 0}" v-for="(sort, index) of sort" :key="sort.id">
				<view class="title" @click="getThirdCategoryGoods(sort.id, '')">
					<view class="name">{{ sort.name }}</view>
					<view class="icon"><image :src="icon.rightGo"></image></view>
				</view>
				<view class="tips">
					<view class="tip ellipsis1" v-for="item2 of sort.vendorGoodsCategorys" :key="item2.id" @tap="getThirdCategoryGoods(sort.id, item2.id)">{{ item2.name }}</view>
				</view>
			</view>
		</view>
		

		<!-- 底部栏 -->
		<view class="bottom-tabber" :style="bottom">
			<view class="block" @click="tabber_sel = '0'">
				<view class="img"><image :src="tabber_sel === '0' ? icon.all_sel : icon.all"></image></view>
				<view class="index" :style="tabber_sel === '0' ? 'color:#D21728' : ''">全部商品</view>
			</view>
			<view class="block" @click="tabber_sel = '1'">
				<view class="img"><image :src="tabber_sel === '1' ? icon.fenlei_sel : icon.fenlei"></image></view>
				<view class="index" :style="tabber_sel === '1' ? 'color:#D21728' : ''">商品分类</view>
			</view>
			<view class="block" @click="gotoContactSell()">
				<view class="img"><image :src="icon.kefu"></image></view>
				<view class="index">联系客服</view>
			</view>
		</view>
		
		<!-- 详情菜单 -->
		<view v-if="showDetailMenu" @click="toggleMenuListHandler()" class="detailMenu-Container">
			<detailMenu></detailMenu>
		</view>
	</view>
</template>

<script>
import goodList from '@/components/goodList/goodList';
import goodListtransverse from '@/components/goodList/goodList-transverse';
import navbar from '@/components/navbar/navbar2';
import detailMenu from "@/components/detailMenu/detailMenu";
import {
	mapState,
	mapMutations
} from 'vuex';

export default {
	components: {
		goodList,
		navbar,
		goodListtransverse
	},
	data() {
		return {
			icon: {
				background: '/static/bg-dp.jpg',
				all: '/static/images/shop/all.png',
				all_sel: '/static/images/shop/all-sel.png',
				fenlei: '/static/images/shop/fenlei.png',
				fenlei_sel: '/static/images/shop/fenlei-sel.png',
				rightGo: '/static/images/shop/rightGo.png',
				error: '/static/errorImage.jpg',
				star_r: '/static/images/shop/star-r.png',
				star_g: '/static/images/shop/star-g.png',
				guanzhu: '/static/images/shop/guanzhu.png',
				return: '/static/images/shop/return.png',
				search: '/static/images/shop/search.png',
				search_w: '/static/images/shop/search-white.png',
				caozuo: '/static/images/shop/caozuo.png',
				msg_center: '/static/images/common/msg-center.png',
				kefu: '/static/images/shop/kefu.png'
			},
			page:1,
			opacity: 0,
			bottom: '',
			star_r: 4,
			headerTop: '0px',
			filterIndex: 0,
			priceOrder: 0, //1 价格从低到高 2价格从高到低
			listType: 0,
			scale: 0,
			goodsList: [],
			state: 1, //1为在上半部滑动，2为在下半部滑动
			styleChange: {
				listTop: 'margin-top: 10rpx',
				input_holder: 'color:white',
				input_color: 'black-v'
			},
			search_msg: '',
			tabber_sel: '0', //0,代表全部商品，1代表分类，客服直接跳转
			sort: [],
			storeMsg:{
				storeMsg:''
			},
			goodsCategoryFirst:'',
			goodsCategoryThird:'',
			isSearch:false,
			showDetailMenu:false
		};
	},
	onLoad(options) {
		let that = this;
		uni.getSystemInfo({
			success(res) {
				that.bottom = 'bottom:' + res.safeAreaInsets.bottom;
				that.scale = res.windowWidth / 750;
			}
		});
        that.vendorId = options.vendorId;
		that.$api.globalUtil.requestAjax({
			url: '/vendorApi/findVendorInfoByVendorIdApi',
			method: 'POST',
			data: {
				vendorId: options.vendorId
			},
			success: function(res) {
			  that.storeMsg = res.data.response;
			  that.storeMsg.vendorLevel -= 0;
			}
		});
		
		that.$api.globalUtil.requestAjax({
			url: '/vendorApi/findVendorCategoryByVendorIdApi',
			method: 'POST',
			data: {
				vendorId: options.vendorId
			},
			success: function(res) {
			  that.sort = res.data.response;
			}
		});
		this.getGood();
	},
	computed: {
		...mapState([ 'imgSite'])
	},
	onPageScroll(e) {
		// console.log(e);
		// console.log('scale==>'+194*this.scale);
		let scale = 22.2 * this.scale;
		if (e.scrollTop >= 222 * this.scale) {
			//下半部滑动
			this.opacity = 1;
			this.state = 2;

			this.styleChange = {
				listTop: 'margin-top: 180rpx',
				input_holder: 'color:#999999',
				input_color: 'white-v'
			};
		} else {
			//上半部滑动
			this.state = 1;
			if (e.scrollTop <= scale) {
				this.opacity = 0;
			} else this.opacity = 1 - scale / e.scrollTop;

			this.styleChange = {
				listTop: 'margin-top: 10rpx',
				input_holder: 'color:white',
				input_color: 'black-v'
			};
		}
	},
		onReachBottom() {
			if(this.tabber_sel == '0'){
				this.page +=1;
				this.getGood();
			}
		},
	methods: {
		
		//咨询
		gotoContactSell() {
			this.$api.globalUtil.gotoContactSell();
		},
		
		
		/**
		 * 搜索商品
		 */
		bindKeyInput: function(e) {
		
			uni.navigateTo({
				url: '/pagesGoods/shop/shopGoods?vendorId='+this.vendorId
			});
		},
		
		
		// 筛选参数回调
		tabClick(a, b, c) {
			console.log(a + 'and' + b + 'and' + c);
			this.filterIndex = a;
			this.priceOrder = b;
			this.listType = c;
			this.page = 1;
			this.getGood();
		},
		getThirdCategoryGoods(id1,id3){
			
			uni.navigateTo({
				url: '/pagesGoods/shop/shopGoods?vendorId='+this.vendorId+"&goodsCategoryFirst="+id1+"&goodsCategoryThird="+id3
			});
		},
		
		
		// TODO
		getGood(){
			let that = this;
			let sort = '';
			if(this.filterIndex == 0){
				sort = null;
			}
			if(this.filterIndex == 1){
				sort = '1';
			}
			if(this.filterIndex == 2){
				sort = '2';
			}
			if(this.filterIndex == 3&this.priceOrder == 1){
				sort = '3';
			}
			if(this.filterIndex == 3&this.priceOrder == 2){
				sort = '4';
			}
			that.$api.globalUtil.requestAjax({
				url: '/vendorApi/findVendorGoodsByVendorIdApi',
				method: 'POST',
				data: {
					vendorId: that.vendorId,
					isSearch: that.isSearch,
					goodsCategoryFirst:that.goodsCategoryFirst,
					goodsCategoryThird:that.goodsCategoryThird,
					sort: sort,
					pageNum:that.page,
					search:that.search_msg,
					pageSize:10
				},
				success: function(res) {
					console.log(res.data.response.results);
					if(res.data.response.results.length>0){
						if(that.page == 1){
							that.goodsList = res.data.response.results;
						}else{
							that.goodsList = that.goodsList.concat(res.data.response.results);
						}
					}else{
						that.$api.msg("没有更多商品了!");
					}
				}
			});
		},
		confirmSearchHandler(){
			this.page = 1;
			this.filterIndex = 0;
			this.goodsCategoryFirst = '';
			this.goodsCategoryThird = '';
			this.isSearch = true;
			this.tabber_sel = '0';
			this.getGood();
		},
		//详情菜单
		toggleMenuListHandler() {
			this.showDetailMenu = !this.showDetailMenu;
		},
		back(){
			let a = getCurrentPages();
			if (a.length > 1) {
				// 我是跳进来的
				uni.navigateBack({
					delta:1
				});
			} else {
				// 我的刷新来的
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		},
		guanzhu(){
			let that = this;
			that.$api.globalUtil.requestAjax({
				url: '/customerAttentionApi/customerAttentionApi',
				method: 'POST',
				data: {
					caId: this.storeMsg.vendorId,
					caType:'1'
				},
				success: function(res) {
					that.storeMsg.userAttentionStatus = !that.storeMsg.userAttentionStatus;
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f5f5f5 !important;
	height: 100%;
	padding-top: 290rpx;
	padding-bottom: 10rpx;
}

/deep/.good_list {
	width: 690rpx !important;
	margin: 0 auto !important;
	margin-top: 20rpx !important;
	padding-bottom: 120rpx !important;
}

/deep/.good_list2 {
	width: 100% !important;
	padding: 0 30rpx 0 30rpx !important;
	padding-bottom: 120rpx !important;
	background-color: white !important;
}
.b-g {
	width: 100%;

	/* #ifdef APP-PLUS */
	height: 388rpx;
	/* #endif */
	/* #ifndef APP-PLUS */
	height: 320rpx;
	/* #endif */
	overflow: hidden;
	position: absolute;
	top: 0;
	z-index: 1;
	image {
		width: 100%;
	}
}
.white {
	width: 100%;

	/* #ifdef APP-PLUS */
	height: 388rpx;
	/* #endif */
	/* #ifndef APP-PLUS */
	height: 320rpx;
	/* #endif */
	background-color: white;
	position: absolute;
	top: 0;
	z-index: 2;
}
.white2 {
	width: 100%;
	height: 188rpx;
	background-color: white;
	position: fixed;
	top: 0;
	z-index: 5;
}
.btn-top {
	width: 100%;

	/* #ifdef APP-PLUS */
	height: 388rpx;
	/* #endif */
	/* #ifndef APP-PLUS */
	height: 320rpx;
	/* #endif */
	position: absolute;
	top: 0;
	z-index: 3;
	display: flex;
	flex-direction: column-reverse;
	.bottom {
		height: 180rpx;
		padding-bottom: 40rpx;
		display: flex;
		padding-left: 30rpx;
		padding-top: 18rpx;
		.good_src {
			width: 120rpx;
			height: 120rpx;
		}
		.right {
			width: 600rpx;
			padding-left: 36rpx;
			display: flex;
			
			.left-v {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 396rpx;
				height: 120rpx;
				
				.name {
					font-size: 32rpx;
					font-weight: bold;
					display: flex;
					align-items: center;
				}
				.name-msg {
					max-width: 290rpx;
				}
				.tip {
					background-color: #FE5E49;
					white-space: nowrap;
					color: white;
					border-radius: 3rpx;
					width: 57rpx;
					height: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 22rpx;
					margin-left: 16rpx;
				}
				.star {
					width: 144rpx;
					height: 34rpx;
					border-radius: 17rpx;
					background: rgba(0, 0, 0, 0.3);
					display: flex;
					align-items: center;
					justify-content: space-around;
					padding: 0 10rpx 0 10rpx;
					image {
						width: 20rpx;
						height: 18rpx;
					}
				}
				.fans {
					font-size: 24rpx;
					font-weight: bold;
				}
			}
			.right-v {
				height: 116rpx;
				width: 138rpx;
				display: flex;
				flex-direction: column-reverse;
				.btn {
					width: 138rpx;
					height: 54rpx;
					border-radius: 27rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: white;
					background: #FE5E49;
					image {
						width: 32rpx;
						height: 27rpx;
					}
					view {
						display: flex;
						align-items: center;
					}
					
					&.followed {
						color: #FE5E49;
						background: rgba(255,255,255,0.3);
						border: 1rpx solid #FE5E49;
						box-shadow: 0px 3rpx 6rpx 0px rgba(0, 0, 0, 0.2);
					}
				}
			}
		}
	}
}
.top {
	color: #000;
	display: flex;
	align-items: center;
	position: fixed;
	/* #ifdef APP-PLUS */
	top: 88rpx;
	/* #endif */
	/* #ifndef APP-PLUS */
	top: 44rpx;
	/* #endif */
	left: 0;
	z-index: 100;
	image {
		width: 57rpx;
		height: 56rpx;
		margin-left: 29rpx;
	}
	.black-v {
		color: white;
		width: 506rpx;
		height: 56rpx;
		border-radius: 28rpx;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		background: rgba(0, 0, 0, 0.2);
		font-size: 26rpx;
		image {
			width: 26rpx;
			height: 26rpx;
			margin-left: 23rpx;
		}
		input {
			width: 356rpx;
			margin-left: 17rpx;
		}
	}
	.white-v {
		width: 504rpx;
		height: 56rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.2);
		border-radius: 28rpx;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		font-size: 26rpx;
		image {
			width: 26rpx;
			height: 26rpx;
			margin-left: 23rpx;
		}
		input {
			width: 356rpx;
			margin-left: 17rpx;
		}
	}
}
.bottom-tabber {
	display: flex;
	justify-content: space-around;
	width: 100%;
	background: white;
	align-items: center;
	height: 99rpx;
	border-top: 1rpx solid #ddd;
	position: fixed;
	left: 0;
	.block {
		// width: 33%;
		text-align: center;
		font-size: 22rpx;
		image {
			width: 36rpx;
			height: 37rpx;
		}
	}
}
.sort {
	margin-top: 50rpx;
	background: white;
	width: 690rpx;
	margin-left: 29rpx;
	border-radius: 16rpx;
	padding-left: 26rpx;
	.title {
		height: 100rpx;
		display: flex;
		align-items: center;
		.name {
			width: 70%;
			font-size: 30rpx;
			color: #333333;
		}
		.icon {
			width: 30%;
			text-align: right;
			image {
				width: 15rpx;
				height: 25rpx;
				margin-right: 25rpx;
			}
		}
	}
	.tips {
		display: flex;
		width: 643rpx;
		justify-content: space-between;
		padding-bottom: 18rpx;
		flex-wrap: wrap;
		.tip {
			width: 310rpx;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #eee;
			border-radius: 5rpx;
			color: #666666;
			font-size: 24rpx;
			margin-bottom: 18rpx;
		}
	}
}

.firstType {
	margin-top: 70rpx;
}



/* #ifdef MP-WEIXIN */
.b-g, .white {
	height: 388rpx;
}
.top {
	top: 136rpx;
}
.btn-top .bottom {
	padding-top: 88rpx;
}
/deep/.good_list, /deep/.good_list2 {
	margin-top: 88rpx !important;
} 
/* #endif */
</style>



